<template>
	<view class="page">
		<view class="zy-location" @click="showSchool">
			<view class="">
				<zywork-icon  type="iconlocation" color="#00aa7f" size="38" />
			</view>
			<view class="" style="margin-left: 10rpx;">
				{{location}}
			</view>	
			<view class="" style="margin-left: 10rpx;">
				<zywork-icon  type="iconyoujiantou" color="#000000" size="38" />
			</view>
		</view>
		<view class="swiper-view">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true" indicator-active-color="#ffffff">
				<swiper-item  v-for="(item, index) in carouselList" :key="index" @click="navToAdDetail(item)">
					<image :src="item.advertisementAdUrl" mode="aspectFill"/>
				</swiper-item>
			</swiper>
		</view>
		<view class="example">
			<uni-grid :column="2" :square="false" :showBorder="true" :highlight="false" @change="navigateTos" >
				<uni-grid-item :index="0" >
					<view class="grid-item-box" @click="navTo('/pages/dq_kuaidi/dq_kuaidi')">
						<zywork-icon  type="iconkuaidi_" color="#00aa7f" :size="iconSize" />
						<view class="zy-column">
							<text class="text">代取快递</text>
							<view>
								携手抵抗疫情
							</view>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="1">
					<view class="grid-item-box" @click="navTo('/pages/print/print-shop')">
						<zywork-icon  type="icondayin" color="#00aa7f"  :size="iconSize" />
						<view class="zy-column">
							<text class="text">校园打印</text>
							<view>
								让你随时打印
							</view>
						</view>
					</view>
				</uni-grid-item>
				
				<!-- <uni-grid-item :index="0" >
					<view class="grid-item-box" >
						<zywork-icon  type="iconicon_xinyong_xianxing_jijin-172" color="#00aa7f" :size="iconSize" />
						<view class="zy-column">
							<text class="text">校园服务</text>
							<view>
								携手抵抗疫情
							</view>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="1">
					<view class="grid-item-box" >
						<zywork-icon  type="iconicon_xinyong_xianxing_jijin-172" color="#00aa7f" :size="iconSize" />
						<view class="zy-column">
							<text class="text">学校精选</text>
							<view>
								随叫随到的外卖
							</view>
						</view>
						
					</view>
				</uni-grid-item>
				<uni-grid-item :index="2">
					<view class="grid-item-box" @click="navTo(2)">
						<zywork-icon  type="iconBag" color="#00aa7f" :size="iconSize" />
						<view class="zy-column">
							<text class="text">校园商城</text>
							<view>
								让你购物更方便
							</view>
						</view>
						
					</view>
				</uni-grid-item>
				<uni-grid-item :index="3">
					<view class="grid-item-box" @click="navTo(3)">
						<zywork-icon  type="iconhuishou" color="#00aa7f" :size="iconSize" />
						<view class="zy-column">
							<text class="text" >校园二手</text>
							<view>
								让你不在浪费
							</view>
						</view>
						
					</view>
				</uni-grid-item> -->
				<!-- <uni-grid-item :index="2">
					<view class="grid-item-box" >
						<zywork-icon  type="iconicon_xinyong_xianxing_jijin-172" color="#00aa7f" :size="iconSize" />
						<view class="zy-column">
							<text class="text">寄快递</text>
							<view>
								预约上门更方便
							</view>
						</view>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="3">
					<view class="grid-item-box" >
						<zywork-icon  type="iconicon_xinyong_xianxing_jijin-172" color="#00aa7f" :size="iconSize" />
						<view class="zy-column">
							<text class="text">批量寄件</text>
							<view>
								便捷寄多个快递
							</view>
						</view>
					</view>
				</uni-grid-item> -->
			</uni-grid>
		</view>
		<view v-if="isShowSchool" class="zy-protocol">
			<view class="view-content">
				<scroll-view  scroll-y="true" class="popup-bottom">
					<uni-list>
						<uni-list-item v-for="(item,index) in arraySchool" :isBorder="true" :title="item.school" showExtraIcon="true"
						 zyworkIconRightSize="40" @click="SchoolChang(index)" zyworkIconRightColor="#00aa7f" :zyworkIcon="schoolIndex == index?'icongou':''"  link>
						</uni-list-item>
					</uni-list>
				</scroll-view>
			</view>
		</view>
		<view class="order-receiving" @click="orderReceiving('/pages/order/orderList')">
			接单大厅
		</view>
	</view>
</template>
<script>
	import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import * as ResponseStatus from '@/common/response-status.js'
	import {loadSysInfo} from '@/common/sys-info.js'
	import {advertisement} from '@/common/advertisement.js'
	import {
		doGet,
		doPostJson,
		MY_SHARE_CODE,
		SHARE_CODE_PAGE_IMG,
		SHARE_TITLE,
		SHARE_CODE,
		FRONT_BASE_URL,
		LOCAL_FILE_STORAGE,
		USER_ID,
		showInfoToast,
		USER_SCHOOL,
		HAS_USER_INFO,
		nullToStr
	} from '@/common/util.js'
	export default {
		components: {
			zyworkIcon,
			uniGrid,
			uniGridItem,
			uniList,
			uniListItem
		},
		data(){
			return {
				userList:[],
				iconSize:60,
				frontBaseUrl: FRONT_BASE_URL,
				localFileStorage: LOCAL_FILE_STORAGE,
				urlList:[
					"/pages/schoolyard_service/schoolyard_service",
					"/pages/snack/snack",
					"/pages/live/live",
					"/pages/live/live",
					"/pages/live/live",
				],
				carouselList: [],
				location:"请选择你的学校",
				isShowSchool:false,
				schoolIndex:0,
				arraySchool:[]
			}
		},
		onLoad(options) {
			this.loadData()
			// 首页的分享
			if (options.shareCode) {
				uni.setStorageSync(SHARE_CODE, options.shareCode)
			}
			// 小程序分享码
			if (options.scene) {
				uni.setStorageSync(SHARE_CODE, options.scene)
			}
			loadSysInfo(this)
		},
		onShow() {
			let myShareCode = uni.getStorageSync(MY_SHARE_CODE);
			if (!myShareCode) {
				uni.hideShareMenu()
			} else {
				uni.showShareMenu()
			}
			this.getSchoolList();
		},
		methods:{
			navToAdDetail(){
				
			},
			showSchool(){
				if(this.isShowSchool){
					uni.showTabBar()
					this.isShowSchool =false;
				}else {
					uni.hideTabBar()
					this.isShowSchool =true;
				}
			},
			SchoolChang(index){
				this.schoolIndex = index;
				this.location = this.arraySchool[this.schoolIndex].school
				this.isShowSchool =false;
				uni.showTabBar()
				uni.setStorageSync(USER_SCHOOL, this.arraySchool[this.schoolIndex].id)
			},
			// 加载学校列表
			getSchoolList(){
				doPostJson('/school/any/getList', {}, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						const rows = nullToStr(res.data.data);
						this.arraySchool = rows
						
						if(uni.getStorageSync(USER_SCHOOL)){
							this.arraySchool.forEach((item,index) =>{
								if(item.id ==uni.getStorageSync(USER_SCHOOL)){
									this.location = item.school
									this.schoolIndex = index;
								}
							})
						}else {
							uni.setStorageSync(USER_SCHOOL, this.arraySchool[this.schoolIndex].id)
							uni.hideTabBar()
							this.isShowSchool =true;
						}
					} else {
						showInfoToast(res.data.message);
					}
					uni.hideLoading()
				}).catch(err => {
					console.log(err);
				})
			},
			orderReceiving(url){
				if (!uni.getStorageSync(HAS_USER_INFO)) {
					// #ifdef MP-WEIXIN
					this.toLogin()
					// #endif
				} else {
					uni.navigateTo({
						url
					})
				}
			},
			navigateTos(e){
				let index = e.detail.index
				// this.orderReceiving(this.urlList[index])
			},
			async loadData() {
				this.loadCarouselList()
			},
			// navTo(index){
			// 	showInfoToast("正在开发中")
			// },
			navTo(url){
				if(url==1){
						showInfoToast("待开放")
						return
				}
				if (!uni.getStorageSync(HAS_USER_INFO)) {
					// #ifdef MP-WEIXIN
					this.toLogin()
					// #endif
				} else {
					uni.navigateTo({
						url:url
					})
					
				}
				
			},
			toLogin() {
				let url = '/pages/login/login'
				uni.navigateTo({
					url: url
				})
			},
			loadCarouselList() {
				advertisement(1, 5, 'index_slider').then(response => {
					let [error, res] = response
					if (res.data.code === ResponseStatus.OK) {
						this.carouselList = res.data.data.rows
						this.carouselList.forEach(item => {
							if (item.advertisementAdUrl && item.advertisementAdUrl.indexOf('http') < 0) {
								item.advertisementAdUrl = FRONT_BASE_URL + item.advertisementAdUrl
								this.advertisementAdUrl = item.advertisementAdUrl
							}
						})
						// this.titleNViewBackground = this.carouselList[0].advertisementBackgroundColor;
						// this.swiperLength = this.carouselList.length;
					}
				}).catch(error => {
					console.log(error)
				})
			},
		}
	}
</script>
<style lang="scss">
	@import '@/common/zywork-main.scss';
	@mixin padding {
		padding: 10rpx 30rpx;
	}
	.zy-protocol{
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		flex: 1;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.view-content{
			width: 80%;
			background-color: #FFFFFF;
			.popup-bottom{
				width: 100%;
				max-height: 600rpx;
				background-color: $primary-backcolor;
			}
		}
		
	}
	.zy-location{
		padding: 0rpx $padding-left-right;
		margin: 15rpx 0rpx;
		@include flex-center-row;
		align-items: center;
		view{
			font-size: 34rpx;
		}
	}
	.swiper-view {
		padding: 0rpx $padding-left-right;
		margin-top: 20rpx;
		border-radius: 15rpx;
		.swiper {
			width: 100%;
			height: 270rpx;
			border-radius: 15rpx;
			image {
				width: 100%;
				height: 270rpx;
				border-radius: 15rpx;
			}
		}
		.keep-out {
			width: 100%;
			height: 30upx;
			border-radius: 100% 100% 0 0;
			background-color: #ff570a;
			margin-top: -15upx;
			position: absolute;
		}
	}
	.example{
		padding: 0rpx $padding-left-right;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		@include padding;
		.grid-item-box {
			width: 100%;
			height: 180rpx;
			display: flex;
			@include flex-center-row;
			align-items: center;
			justify-content: center;
			.zy-column{
				@include flex-center-column;
				justify-content: center;
				view{
					padding: 10rpx 10rpx;
					color: $info-text-color;
					font-size: $font-sm;
				}
				text{
					padding: 10rpx 10rpx;
					color: $tabbar-text;
					font-size: $font-base;
				}
			}
			
		}
	}
	.order-receiving{
		width: 70%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 50rpx auto;
		background-color: #00AA7F;
		color: #FFFFFF;
		text-align: center;
	}
		
</style>
